<script setup>
import { Search, Refresh, Delete, FolderAdd, Edit, Menu } from '@element-plus/icons-vue';
import { useRoleStore } from '@/stores'
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';
const roleStore = useRoleStore()
const { roles, roleSearch, pageInfo, updateDialogVisible, roleFrom, menuDialogVisible, menuData, menuRef, defaultCheckedKeys } = storeToRefs(roleStore)
const { getRoles, getCheckedMenu, refresh, deleteRoles, EditRole, handleSelectionChange, save, deleteRole, handleCheckChange, addCheckedKeys } = roleStore
onMounted(() => {
    getRoles()
})
</script>
<template>
    <!-- 功能部分 -->
    <div style="display: flex; flex-direction: column; margin: 10px 0 0 20px;">
        <div style="margin: 0 0 10px 0;display: inline;">
            <el-input v-model="roleSearch.name" style="width: 200px; margin: 0 15px 0 0 ;" placeholder="角色名称"
                :suffix-icon="Search"></el-input>
            <el-button style="margin: 0 15px 0 0;" type="primary" @click="getRoles()">搜索<el-icon>
                    <Search />
                </el-icon></el-button>
            <el-button style="margin: 0 15px 0 0 ;" type="primary" @click="refresh()">重置<el-icon>
                    <Refresh />
                </el-icon></el-button>
            <el-button style="margin: 0 5px 0 0 ;" type="success"
                @click="updateDialogVisible = true; roleFrom = {}">新增<el-icon>
                    <FolderAdd />
                </el-icon>
            </el-button>
            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :hide-after=100 hide-icon title="确定要删除吗?"
                @confirm="deleteRoles()">
                <template #reference>
                    <el-button type="danger">批量删除<el-icon>
                            <Delete />
                        </el-icon></el-button>
                </template>
            </el-popconfirm>
        </div>
    </div>

    <!-- 主体部分 -->
    <div style=" margin: 10px 0 0 20px;padding-right: 20px;">
        <el-table :data="roles" :border="true" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" />
            <el-table-column property="id" label="id" />
            <el-table-column property="name" label="name" />
            <el-table-column property="description" label="description" />
            <el-table-column property="options" label="options" width="301px">
                <template #default="scope">
                    <el-button type="primary" @click="getCheckedMenu(scope.row.id)">分配权限<el-icon>
                            <Menu></Menu>
                        </el-icon>
                    </el-button>
                    <el-button type="warning" @click="EditRole(scope.row)">编辑<el-icon>
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :hide-after=100 hide-icon
                        title="确定要删除吗?" @confirm="deleteRole(scope.row.id)">
                        <template #reference>
                            <el-button type="danger">删除<el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>
    </div>

    <!-- 分页查询 -->
    <div style=" margin: 10px 0 0 20px;padding-right: 20px;">
        <el-pagination v-model:current-page="pageInfo.current" v-model:page-size="pageInfo.pageSize" :total="pageInfo.total"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" @size-change="getRoles()"
            @current-change="getRoles()" />
    </div>

    <!-- 新增和编辑 弹出对话框 -->
    <el-dialog v-model="updateDialogVisible" title="新增用户" width="30%" :close-on-click-modal="false">
        <el-form label-width="80px" v-model="roleFrom">
            <el-form-item label="名称">
                <el-input v-model="roleFrom.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限">
                <el-input v-model="roleFrom.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 分配菜单 -->
    <el-dialog v-model="menuDialogVisible" title="分配菜单" width="30%" :close-on-click-modal="false">
        <el-tree ref="menuRef" :data="menuData" :default-checked-keys="defaultCheckedKeys" node-key="id" show-checkbox @check-change="handleCheckChange" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="menuDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addCheckedKeys()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style scoped></style>